<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>查看所有员工</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath }/static/layui/css/layui.css">
</head>
<body>
<div class="layui-fluid" style="margin-top: 40px;">
    <fieldset class="layui-elem-field layui-field-title">
        <legend style="font-size: 26px">所有员工</legend>
    </fieldset>
    <div class="operation layui-pull-right layui-btn">添加员工</div>
    <table id="allStaff" lay-filter="staff"></table>
</div>


<div class="layui-container">
    <div class="layui-tab layui-tab-brief" id="sign" lay-filter="" style="display: none;">
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="" style="margin: 40px 20px;">
                    <form class="layui-form layui-form-pane form" id="addStaff">
                        <div class="layui-form-item">
                            <label class="layui-form-label">员工</label>
                            <div class="layui-input-block">
                                <input type="text" name="username" required  lay-verify="required" placeholder="请输入员工名" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <br>
                        <div class="layui-form-item">
                            <label class="layui-form-label">密码</label>
                            <div class="layui-input-block">
                                <input type="password" name="userpwd" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <br>
                        <div class="layui-form-item">
                            <label class="layui-form-label">工号</label>
                            <div class="layui-input-block">
                                <input type="password" name="number" required  lay-verify="required" placeholder="请输入工号" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <br>
                        <div class="layui-form-item">
                            <button class="layui-btn layui-btn-fluid layui-btn-normal layui-btn-radius regist-btn" lay-submit lay-filter="addStaff">立即添加</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


<script src="${pageContext.request.contextPath }/static/layui/layui.js"></script>
<script>
    layui.use(['element','table'],function () {
        var element = layui.element,
            $ = layui.jquery,
            table = layui.table;

        var dt = table.render({
            elem:"#allStaff",
            url:"/AllStaff",
            page:true,
            cols:[[
                {field: 'id', title: 'sID', align: 'center'},
                {field: 'username', title: '员工', align: 'center'},
                {field: 'userpwd', title: '密码', align: 'center'},
                {field: 'number', title: '工号', align: 'center'},
                {title: '操作', align: 'center',toolbar:"#tools"}
            ]]
        });


        $('.operation').click(function () {
            layer_index = layer.open({
                type:1,
                content:$('#sign'),
                area:['360px','460px'],
                title:"房屋管理系统",
                closeBtn:2
            });
        });

        table.on('tool(staff)',function(obj){
            var data = obj.data;
            console.log(data);
            var layEvent = obj.event;
            var tr = obj.tr;
            var currPage = dt.config.page.curr;
            
            if(layEvent ==="edit"){
                <!--todo-->
            	window.location.href="toEditStaffPage?id="+data.id;
            }
            if(layEvent === 'delete'){
                layer.confirm('确认删除当前数据吗？', {icon: 5, shade: 0.1}, function (index) {
                    <!--todo-->
                    $.post("deleteStaff", {id: data.id}, function (success) {
                        if (success == "OK") {
                            obj.del();
                            dt.reload({
                                page: {curr: 1}
                            });
                            layer.msg("删除成功");
                        }
                    })
                });
            }
        });


        $('.regist-btn').click(function () {
            if($("input[name='username']").val()!=""&&$("input[name='userpwd']").val()!=""&&$("input[name='number']").val()!=""){
                $.post("addStaff",$('.form').serialize(),function (res) {
                    console.log(res)
                    if(res=='OK'){
                        layer.close(layer_index);
                        layer.alert("注册成功",{icon:1,time:2000});
                        $('.form')[0].reset();
                    }else{
                        layer.alert("注册失败,用户名已存在",{icon:1,time:2000});
                    }
                })
            }else{
                layer.msg("请填写所有表单");
            }
        });

    });
</script>
<script type="text/html" id="tools">
    <a class="layui-btn layui-btn-sm" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除</a>
</script>
</body>
</html>